<template>
	<layout :footerVisible="true" class="body">
		<u-navbar title="申请开票" :background="{ 'background-image': 'linear-gradient(to right, #434AD8, #8E77F5)' }"
			:border-bottom="false" backIconColor="#fff" titleColor="#fff"></u-navbar>

		<u-sticky z-index="981">
			<view class="sticky gray-bgc">
				<view class="tab-wrapper h-box" style="width: 100%;">
					<view @click="handleTabClick(0)" class="flex-extend uni-center"
						:class="{'tab-item-active': tabIndex == 0}">预约订单</view>
					<view @click="handleTabClick(1)" class="flex-extend uni-center"
						:class="{'tab-item-active': tabIndex == 1}">优享订单</view>
				</view>
			</view>
			<view class="list-head gray-bgc">
				<view class="h-box justify-between">
					<view class="h-box" @click="clickShowCalendar">
						<image class="mg-r-xs" style="width: 36rpx;height: 36rpx;"
							src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/main_ic_canyu@2x.png">
						</image>
						<view class="mg-r-xs">时间筛选</view>
						<image style="width: 16rpx;height: 16rpx;"
							src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_arrow_down@2x.png">
						</image>
					</view>
					<view class="h-box">
						<view class="h-box pad-r-sm" @click="clickInvoiceRecord">
							<image class="mg-r-xs" style="width: 36rpx;height: 36rpx;"
								src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/main_ic_kpjilu@2x.png">
							</image>
							<view>开票记录</view>
						</view>
						<view class="h-box" @click="clickInvoiceTitle">
							<image class="h-box mg-r-xs" style="width: 36rpx;height: 36rpx;"
								src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/main_ic_tguanli@2x.png">
							</image>
							<view>抬头管理</view>
						</view>
					</view>
				</view>
			</view>
		</u-sticky>

		<view v-show="tabIndex === 0">
			<view class="list" v-if="subscribeOrderList.length">
				<view class="list-item h-box" v-for="(item, index) in subscribeOrderList" :key="index"
					@click="clickSelect(index)">
					<view class="v-box">
						<image v-if="!item.selected" style="width: 34rpx; height: 34rpx;"
							src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/radio_no_select.png"></image>
						<image v-else style="width: 34rpx; height: 34rpx;" src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/radio_select.png"></image>
					</view>
					<view class="list-item-content flex-v flex-extend justify-between mg-l-sm">
						<view class="h-box justify-between b-mg">
							<view class="h-box">
								<image class="h-box mg-r-xs" style="width: 28rpx;height: 28rpx;"
									src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_shijian.png">
								</image>
								<text>{{ formatCreateTime(item.create_time || 0) }}</text>
							</view>
							<view v-if="item.type === 'goods'" class="flex-h" style="align-items: baseline;">
								<view class="mg-r-xs">￥{{ ((item.total_fee || 0) - (item.discount_fee || 0)) / 100 }}
								</view>
								<view class="gray" style="font-size: 18rpx;">x{{ item.items.count || 1 }}</view>
							</view>
							<view v-else>￥{{ ((item.total_fee || 0) - (item.discount_fee || 0)) / 100 }}</view>
						</view>
						<template>
							<view v-if="item.type === 'goods'" class="uni-flex">
								<view style="width: 160rpx; margin-right: 20rpx;">
									<u-lazy-load loading-img="/static/easy-loadimage/loading.gif"
										error-img="/static/img/img_home_quesheng@2x.png"
										:image="item.items.goods_thumb" :height="110" img-mode="aspectFill"
										:border-radius='20'></u-lazy-load>
								</view>
								<view class="flex-extend flex-v justify-center">{{ item.items.goods_name }}</view>
							</view>
							<view v-else-if="item.type === 'subscribe'">
								<view class="uni-flex">
									<view class="order-img">
										<view class="leftImg">
											<u-lazy-load
												image="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/main_ming_juben_da@2x.png"
												:height="140" img-mode="aspectFill" :border-radius='[20, 0, 0, 20]'>
											</u-lazy-load>
											<view class="hint">{{ item.scriptInfo ? item.scriptInfo.name : '' }}</view>
										</view>
										<view class="rightImg">
											<u-lazy-load loading-img="/static/easy-loadimage/loading.gif"
												error-img="/static/img/img_home_quesheng@2x.png"
												:image="item.scriptInfo.cover" :height="140" img-mode="aspectFill"
												:border-radius='[0, 20, 20, 0]'></u-lazy-load>
										</view>
									</view>
									<view class="flex-extend order-text">
										<view class="h-box justify-between">
											<text class="text-title">{{ item.motorcadeInfo.name || '-' }}</text>
										</view>
										<view class="uni-text-gray u-line-1" v-if="item.motorcadeInfo.roomId">
											{{ item.motorcadeInfo.storeName }} | {{item.motorcadeInfo.roomName}}</view>
										<view class="uni-text-gray u-line-1" v-else>{{ item.motorcadeInfo.storeName }}
										</view>
										<view class="uni-text-gray u-line-1">
											{{ formatTime(item.motorcadeInfo.startTime, item.motorcadeInfo.endTime) }}
										</view>
									</view>
								</view>
							</view>
							<view v-else-if="item.type === 'tearoom'">
								<view class="uni-flex">
									<view class="order-img">
										<u-lazy-load loading-img="/static/easy-loadimage/loading.gif"
											error-img="/static/img/img_home_quesheng@2x.png"
											:image="item.roomInfo.photos" :height="140" img-mode="aspectFill"
											:border-radius='20'></u-lazy-load>
									</view>
									<view class="flex-extend order-text">
										<view class="h-box justify-between">
											<text class="text-title">茶室</text>
										</view>
										<view class="uni-text-gray uni-ellipsis">{{ item.items.store_name }} |
											{{item.items.room_name}}</view>
										<view class="uni-text-gray">
											{{ formatTime(item.items.start_time, item.items.end_time) }}</view>
									</view>
								</view>
							</view>
						</template>
						<view class="mg-t-xs h-fill">
							<view class="h-box">
								<text class="mg-r-sm gray">订单号</text>
								<text class="uni-ellipsis flex-extend" style="color: #5A5A5C;">{{ item._id }}</text>
							</view>
							<view>
								<text class="mg-r-sm gray">下单人</text>
								<text class="uni-ellipsis"
									style="color: #5A5A5C;">{{ `${item.memberInfo.nickname || '微信用户'} | ${item.memberInfo.id} | ${item.memberInfo.mobile}` }}</text>
							</view>
						</view>
					</view>
				</view>

				<view class="h-fill">
					<uni-load-more :status="subscribeOrderPage.status"></uni-load-more>
				</view>
			</view>

			<view v-else style="margin-top: 40%;">
				<u-empty></u-empty>
			</view>
		</view>

		<view v-show="tabIndex === 1">
			<view class="list" v-if="goodsOrderList.length">
				<view class="list-item h-box" v-for="(item, index) in goodsOrderList" :key="index"
					@click="clickSelect(index)">
					<view class="v-box">
						<image v-if="!item.selected" style="width: 34rpx; height: 34rpx;"
							src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/radio_no_select.png"></image>
						<image v-else style="width: 34rpx; height: 34rpx;" src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/radio_select.png"></image>
					</view>
					<view class="list-item-content flex-v flex-extend justify-between mg-l-sm">
						<view class="h-box justify-between b-mg">
							<view class="h-box">
								<image class="h-box mg-r-xs" style="width: 28rpx;height: 28rpx;"
									src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_shijian.png">
								</image>
								<text>{{ formatCreateTime(item.create_time || 0) }}</text>
							</view>
							<view v-if="item.type === 'goods'" class="flex-h" style="align-items: baseline;">
								<view class="mg-r-xs">￥{{ ((item.total_fee || 0) - (item.discount_fee || 0)) / 100 }}
								</view>
								<view class="gray" style="font-size: 18rpx;">x{{ item.items.count || 1 }}</view>
							</view>
							<view v-else>￥{{ ((item.total_fee || 0) - (item.discount_fee || 0)) / 100 }}</view>
						</view>
						<template>
							<view v-if="item.type === 'goods'" class="h-box">
								<view style="width: 160rpx; margin-right: 20rpx;">
									<u-lazy-load loading-img="/static/easy-loadimage/loading.gif"
										error-img="/static/img/img_home_quesheng@2x.png"
										:image="item.items.goods_thumb" :height="110" img-mode="aspectFill"
										:border-radius='20'></u-lazy-load>
								</view>
								<view class="flex-extend flex-v justify-center u-line-2">{{ item.items.goods_name }}</view>
							</view>
							<!-- <view v-else-if="item.type === 'subscribe'">
								<view class="uni-flex">
									<view class="order-img">
										<view class="leftImg">
											<u-lazy-load
												image="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/main_ming_juben_da@2x.png"
												:height="140" img-mode="aspectFill" :border-radius='[20, 0, 0, 20]'>
											</u-lazy-load>
											<view class="hint">{{ item.scriptInfo ? item.scriptInfo.name : '' }}</view>
										</view>
										<view class="rightImg">
											<u-lazy-load loading-img="/static/easy-loadimage/loading.gif"
												error-img="/static/img/img_home_quesheng@2x.png"
												:image="item.scriptInfo.cover" :height="140" img-mode="aspectFill"
												:border-radius='[0, 20, 20, 0]'></u-lazy-load>
										</view>
									</view>
									<view class="flex-extend order-text">
										<view class="h-box justify-between">
											<text class="text-title">{{ item.motorcadeInfo.name || '-' }}</text>
										</view>
										<view class="uni-text-gray u-line-1" v-if="item.motorcadeInfo.roomId">
											{{ item.motorcadeInfo.storeName }} | {{item.motorcadeInfo.roomName}}</view>
										<view class="uni-text-gray u-line-1" v-else>{{ item.motorcadeInfo.storeName }}
										</view>
										<view class="uni-text-gray u-line-1">
											{{ formatTime(item.motorcadeInfo.startTime, item.motorcadeInfo.endTime) }}
										</view>
									</view>
								</view>
							</view>
							<view v-else-if="item.type === 'tearoom'">
								<view class="uni-flex">
									<view class="order-img">
										<u-lazy-load loading-img="/static/easy-loadimage/loading.gif"
											error-img="/static/img/img_home_quesheng@2x.png"
											:image="item.roomInfo.photos" :height="140" img-mode="aspectFill"
											:border-radius='20'></u-lazy-load>
									</view>
									<view class="flex-extend order-text">
										<view class="h-box justify-between">
											<text class="text-title">茶室</text>
										</view>
										<view class="uni-text-gray uni-ellipsis">{{ item.items.store_name }} |
											{{item.items.room_name}}</view>
										<view class="uni-text-gray">
											{{ formatTime(item.items.start_time, item.items.end_time) }}</view>
									</view>
								</view>
							</view> -->
						</template>
						<view class="mg-t-xs h-fill">
							<view class="h-box">
								<text class="mg-r-sm gray">订单号</text>
								<text class="uni-ellipsis flex-extend" style="color: #5A5A5C;">{{ item._id }}</text>
							</view>
							<view>
								<text class="mg-r-sm gray">下单人</text>
								<text class="uni-ellipsis"
									style="color: #5A5A5C;">{{ `${item.memberInfo.nickname || '微信用户'} | ${item.memberInfo.id} | ${item.memberInfo.mobile}` }}</text>
							</view>
						</view>
					</view>
				</view>

				<view class="h-fill">
					<uni-load-more :status="goodsOrderPage.status"></uni-load-more>
				</view>
			</view>

			<view v-else style="margin-top: 40%;">
				<u-empty></u-empty>
			</view>
		</view>

		<template v-slot:footer="">
			<view class="footer h-box justify-around v-fill">
				<view class="footer-left h-box" @click="clickSelectAll">
					<view class="v-box">
						<template v-if="tabIndex">
							<image v-if="!goodsOrderPage.selectedAll" style="width: 34rpx; height: 34rpx;"
								src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/radio_no_select.png"></image>
							<image v-else style="width: 34rpx; height: 34rpx;" src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/radio_select.png">
							</image>
						</template>
						<template v-else>
							<image v-if="!subscribeOrderPage.selectedAll" style="width: 34rpx; height: 34rpx;"
								src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/radio_no_select.png"></image>
							<image v-else style="width: 34rpx; height: 34rpx;" src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/radio_select.png">
							</image>
						</template>
					</view>
					<view class="mg-l-xs">本页全选</view>
				</view>
				<view class="footer-right" @click="clickNext">下一步</view>
			</view>
		</template>

		<u-calendar v-model="showCalendar1" mode="range" safe-area-inset-bottom border-radius="60"
			active-bg-color="#FF5673" range-bg-color="rgba(255, 86, 115, .3)" range-color="#ffffff" toolTip="时间筛选"
			class="calendar" @change="clickCalendar"></u-calendar>

		<u-calendar v-model="showCalendar2" mode="range" safe-area-inset-bottom border-radius="60"
			active-bg-color="#FF5673" range-bg-color="rgba(255, 86, 115, .3)" range-color="#ffffff" toolTip="时间筛选"
			class="calendar" @change="clickCalendar"></u-calendar>
	</layout>
</template>

<script>
	const oneHour = 3600000
	const dbCmd = uniCloud.database().command

	import {
		getMyNeedInvoiceOrders
	} from "@/api/platform/order.js"

	export default {
		name: 'invoice-apply',
		data() {
			return {
				subscribeOrderList: [],
				subscribeOrderPage: {
					selectedAll: false,
					selectList: {
						money: 0,
						idArr: []
					},

					orderType: 'subscribe', // 包含剧本杀订单、茶室订单
					pageNum: 0,
					pageSize: 10,
					total: 0,
					status: 'more',
					createStartTime: this.$moment(Date.now()).hour(0).minute(0).second(0).millisecond(0).valueOf(),
					createEndTime: Date.now()
				},

				goodsOrderList: [],
				goodsOrderPage: {
					selectedAll: false,
					selectList: {
						money: 0,
						idArr: []
					},

					orderType: 'goods', // 优享订单
					pageNum: 0,
					pageSize: 10,
					total: 0,
					status: 'more',
					createStartTime: this.$moment(Date.now()).hour(0).minute(0).second(0).millisecond(0).valueOf(),
					createEndTime: Date.now()
				},

				showCalendar1: false,
				showCalendar2: false,

				tabIndex: 0
			}
		},
		created() {
			console.clear();
		},
		onReady() {
			this.getData()
		},
		onReachBottom() {
			let listData = this[this.orderList]
			let listPage = this[this.orderListPage]

			if (listPage.total === listData.length) return
			this.getData()
		},
		computed: {
			formatCreateTime() {
				return time => this.$moment(time).format("yyyy-MM-DD hh:mm")
			},
			formatTime() {
				return (startTime, endTime) => {
					return this.$moment(startTime).format('M月D日 ') + this.$moment(startTime).format('HH:mm') + '-' +
						this.$moment(endTime).format('HH:mm') + ' 共' + (endTime - startTime) / oneHour + '个小时'
				}
			},

			orderList() {
				return this.tabIndex ? 'goodsOrderList' : 'subscribeOrderList'
			},
			orderListPage() {
				return this.tabIndex ? 'goodsOrderPage' : 'subscribeOrderPage'
			}
		},
		methods: {
			clickNext() {
				if (!this.subscribeOrderPage.selectList.idArr?.length && !this.goodsOrderPage.selectList.idArr?.length) {
					uni.showToast({
						title: '请选择订单',
						icon: 'none'
					})
					return
				}
				let q = {
					money: this.goodsOrderPage.selectList.money + this.subscribeOrderPage.selectList.money,
					idArr: [...this.goodsOrderPage.selectList.idArr, ...this.subscribeOrderPage.selectList.idArr]
				}
				let data = encodeURIComponent(JSON.stringify(q))
				let that = this
				uni.navigateTo({
					url: `/pagesUser/platform/invoice-apply-form`,
					success: res => res.eventChannel.emit('data', data),
					events: {
						isUpdate: () => {
							that.subscribeOrderList = []
							that.subscribeOrderPage.selectedAll = false
							that.subscribeOrderPage.selectList = {
								money: 0,
								idArr: []
							}
							this.subscribeOrderPage.selectedAll = false
							that.subscribeOrderPage.pageNum = 0
							that.subscribeOrderPage.total = 0
							that.subscribeOrderPage.status = 'more'

							that.goodsOrderList = []
							that.goodsOrderPage.selectedAll = false
							that.goodsOrderPage.selectList = {
								money: 0,
								idArr: []
							}
							this.goodsOrderPage.selectedAll = false
							that.goodsOrderPage.pageNum = 0
							that.goodsOrderPage.total = 0
							that.goodsOrderPage.status = 'more'

							that.getData()
						}
					}
				})
			},

			clickSelectAll() {
				let listData = this[this.orderList]
				let listPage = this[this.orderListPage]

				let selected = listPage?.selectedAll ? false : true
				for (let order of listData) {
					this.$set(order, 'selected', selected)

					let count = this.tabIndex ? order.items.count : 1
					let idx = listPage.selectList.idArr.indexOf(order._id)
					if (selected && idx === -1) {
						listPage.selectList.money += ((order.total_fee || 0) - (order.discount_fee || 0)) * count / 100
						listPage.selectList.idArr.push(order._id)
					}
					if (!selected && idx !== -1) {
						listPage.selectList.money -= ((order.total_fee || 0) - (order.discount_fee || 0)) * count / 100
						listPage.selectList.idArr.splice(idx, 1)
					}
				}
				this.$set(listPage, 'selectedAll', selected)
			},
			clickSelect(index) {
				let order = this[this.orderList][index]
				let listPage = this[this.orderListPage]

				this.$set(order, 'selected', !order?.selected)

				let count = this.tabIndex ? order.items.count : 1
				let idx = listPage.selectList.idArr.indexOf(order._id)
				if (idx === -1) {
					listPage.selectList.money += ((order.total_fee || 0) - (order.discount_fee || 0)) * count / 100
					listPage.selectList.idArr.push(order._id)

					let notAll = this[this.orderList].some(item => !item.selected)
					this.$set(listPage, 'selectedAll', notAll ? false : true)
				} else {
					listPage.selectList.money -= ((order.total_fee || 0) - (order.discount_fee || 0)) * count / 100
					listPage.selectList.idArr.splice(idx, 1)

					this.$set(listPage, 'selectedAll', false)
				}
			},

			clickInvoiceTitle() {
				uni.navigateTo({
					url: `/pagesUser/platform/invoice-title-list`
				})
			},
			clickInvoiceRecord() {
				uni.navigateTo({
					url: `/pagesUser/platform/invoice-record`
				})
			},

			async clickCalendar(e) {
				let listPage = this.orderListPage
				this[listPage].selectedAll = false
				this[listPage].selectList = {
					money: 0,
					idArr: []
				}
				this[listPage].createStartTime = this.$moment(e.startDate).valueOf()
				this[listPage].createEndTime = this.$moment(e.endDate).add(1, 'days').valueOf()
				this[listPage].status = 'more'
				this[listPage].pageNum = 0
				this[listPage].total = 0

				let listData = this.orderList
				this[listData] = []

				uni.showLoading({
					mask: true
				})
				try {
					await this.getListData(this.tabIndex)
				} catch (e) {
					uni.hideLoading()
				}
				uni.hideLoading()
			},
			clickShowCalendar() {
				let show = this.tabIndex ? 'showCalendar1' : 'showCalendar2'
				this[show] = true
			},

			handleTabClick(index) {
				this.tabIndex = index
			},

			async getListData(type = 0) {
				let listData = type ? 'goodsOrderList' : 'subscribeOrderList'
				let listPage = type ? 'goodsOrderPage' : 'subscribeOrderPage'
				if (['loading', 'noMore'].includes(this[listPage].status)) return
				this[listPage].status = 'loading'

				let res = await getMyNeedInvoiceOrders({
					showLoading: false,
					orderType: this[listPage].orderType, // 查询预约订单时一同查询茶室订单
					pageNum: this[listPage].pageNum + 1,
					pageSize: this[listPage].pageSize,
					createStartTime: this[listPage].createStartTime,
					createEndTime: this[listPage].createEndTime,
				})

				if (res.list.length) {
					this[listPage].pageNum += 1
					this[listData] = this[listData].concat(res.list)
				}
				this[listPage].total = type ? (res?.total || 0) : (res.total[0]?.total || 0)
				this[listPage].status = this[listData].length < this[listPage].total ? 'more' : 'noMore'
			},
			async getData() {
				uni.showLoading({
					mask: true
				})
				try {
					await this.getListData(0)
					console.log('subscribeOrderList', this.subscribeOrderList)
					await this.getListData(1)
					console.log('goodsList', this.goodsOrderList)
				} catch (e) {
					uni.hideLoading()
					console.error(e);
				}

				uni.hideLoading()
			}
		}
	}
</script>

<style>
	page {
		/* background-color: #EFF1F7; */
		background-color: white;
	}
</style>

<style scoped lang="scss">
	.gray {
		color: #969696;
	}

	.gray-bgc {
		background-color: #EFF1F7;
	}

	.body {
		display: flex;
		flex-direction: column;
		height: 100vh;

		$margin-bottom-height: 60rpx;

		/deep/ .u-navbar-inner {
			margin-bottom: $margin-bottom-height;
		}

		.sticky {
			padding: 30rpx;
			border-radius: $margin-bottom-height $margin-bottom-height 0 0;
			position: relative;
			z-index: 981;

			.tab-wrapper {
				background: #FFFFFF;
				border-radius: 44rpx;
				height: 80rpx;
				line-height: 80rpx;

				view {
					margin: 0 8rpx;
				}
			}

			.tab-item-active {
				height: 64rpx;
				line-height: 64rpx;
				background-color: #6667FF;
				box-shadow: inset 0px 1px 10rpx 0px rgba(0, 0, 0, 0.3);
				border-radius: 36rpx;
				border: 2rpx solid #FFFFFF;
				font-size: 30rpx;
				color: #FFFFFF;
			}
		}

		.list-head {
			&>view {
				padding: 20rpx 30rpx;
				border-radius: $margin-bottom-height $margin-bottom-height 0 0;
				background-color: white;
			}
		}

		.list {
			background-color: white;

			.list-item {
				margin: 0 30rpx 30rpx 30rpx;
				padding: 30rpx;
				background: #EFF1F7;
				border-radius: 20rpx;

				.list-item-content {
					width: 100%;
					height: 100%;

					.order-img {
						width: 140rpx;
						height: 140rpx;
						background-color: #ececec;
						border-radius: 20rpx;
						margin-right: 20rpx;
						position: relative;

						.leftImg {
							display: inline-block;
							width: 30rpx;
							position: absolute;
							left: 0;
							z-index: 2;

							.hint {
								position: absolute;
								top: 50%;
								transform: translateY(-50%) scale(.6);

								width: 30rpx;
								height: 140rpx;
								line-height: 1.3;
								display: flex;
								flex-direction: column;

								color: #fff;
								overflow: hidden;
							}
						}

						.rightImg {
							display: inline-block;
							width: 112rpx;
							position: absolute;
							right: 0;
						}
					}

					.order-text {
						width: 410rpx;

						view {
							line-height: 1.7;
						}
					}
				}
			}
		}

		.footer {
			box-shadow: 0px -2px 30px 0px rgba(0, 0, 0, 0.1);

			.footer-left {
				color: black;
			}

			.footer-right {
				width: 400rpx;
				height: 88rpx;
				line-height: 88rpx;
				background: #FF5673;
				border-radius: 50rpx;
				color: white;
				text-align: center;
			}
		}

		/deep/ .u-radio {
			.u-radio__label {
				margin: 0;
			}
		}

		.calendar /deep/ .u-btn--primary {
			background-color: #FF5673;
			color: white;
		}
	}
</style>
